<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script type="text/javascript" src="js/jquery.js"></script>

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!--<div class="layui-header"></div>-->
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
<ul class="layui-nav" style="background-color: #202020">
    <li class="layui-nav-item" style="width: 5%"></li>
    <li class="layui-nav-item" style="width: 13%" value="logo"><a href=""><img src="image/yoyoga.png" style="height: 50px"></a></li>
    <li class="layui-nav-item" style="width: 12%"></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">主页</a></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%">
        <a href="#">介绍</a>
        <dl class="layui-nav-child">
            <dd><a href="">瑜伽好处</a></dd>
            <dd><a href="">瑜伽流派</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">场馆</a></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%">
        <a href="#">教练</a>
        <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd class="layui-this"><a href="">选中项</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">社区</a></li>


    <!--<li class="layui-nav-item"  style="float: right">
        <a href="">注册</a>
    </li>
    <li class="layui-nav-item"  style="float: right"><span style="color: #cccccc">|</span></li>
    <li class="layui-nav-item" style="float: right">
        <a href="">登陆</a>
    </li>-->
</ul>
<!--
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      &lt;!&ndash; 左侧导航区域（可配合layui已有的垂直导航） &ndash;&gt;
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">所有商品</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li>
      </ul>
    </div>
  </div>-->

   <div class="layui-body">
    <!-- 内容主体区域 -->
    	<form class="layui-form" style="width: 80%;margin-left: 50px;">
            <div style="margin-left: 500px;margin-top: 10px;font-size: 20px">学员信息完善</div>
    		<div style="margin-bottom: 50px;"></div>
        <div class="layui-form-item" style="margin-top: 20px;">
           <label class="layui-form-label">用户账号</label>
           <div class="layui-input-block">
             <input type="text" id="userAccount" name="account" required  lay-verify="required"  value="" autocomplete="off" readonly="readonly" class="layui-input">
           </div>
         </div>
          <div class="layui-form-item" style="margin-top: 20px;">
           <label class="layui-form-label">用户姓名</label>
           <div class="layui-input-block">
             <input type="text" id="userName" name="userName11" required  lay-verify="required" value="" autocomplete="off" class="layui-input">
           </div>
         </div>
          <div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">个人简介</label>
		    <div class="layui-input-block">
		      <textarea placeholder="请输入内容" id="introduction" class="layui-textarea"></textarea>
		    </div>
		  </div>

            <div class="layui-form-item">
                <label class="layui-form-label">可见状态</label>
                <div class="layui-input-block">
                    <select id="permission" name="interest" lay-filter="aihao">
                        <option value="1" selected="">所有人可见</option>
                        <option value="0">仅自己可见</option>
                        <option value="2">好友可见</option>
                    </select>
                </div>
            </div>

          <div class="layui-form-item" style="margin-left: 100px;">
           <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;">
			  <legend>请选择地址信息</legend>
			</fieldset>
         </div>
         <iframe id="mapPage" width="80%" height="800px" frameborder=0 style="margin-left: 100px;"
    			src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
		</iframe>
			
			<div style="margin-left: 100px;">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			  <legend>请上传头像</legend>
			</fieldset>

			<div class="layui-upload">
			  <button type="button" class="layui-btn" id="test1">上传图片</button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" width="60" height="60" id="demo1">
			    <p id="demoText"></p>
			  </div>
			</div>
			</div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1" id="btn1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

   </form>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
</div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript" src="layui/layui.js"></script>
<script>
    var path;
    var address;
    var latlng;
	layui.use([ 'jquery', 'layer', 'form', 'table','laydate','upload','element'], function(){
 		    var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var table = layui.table;
			var laydate=layui.laydate;
			var upload=layui.upload;

			//普通图片上传
			  var uploadInst = upload.render({
			    elem: '#test1'
			    ,url: 'file/upload'
			    ,accept:'images'
			    ,acceptMime:'image/*'
			    ,auto:true//是否选择文件之后自动上传
			    ,field:'mf' //表单的name值
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#demo1').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			      layer.msg("上传成功");
			      path = res.src;
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#demoText');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });

			  //监听导航点击
			  element.on('nav(demo)', function(elem){
			    //console.log(elem)
			//  layer.msg(elem.text());
			  });
			  
			});
			
			window.addEventListener('message', function(event) {
				// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
				var loc = event.data;
				if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
					console.log('location', loc);
					detail = loc.poiaddress;
					console.log("detail",detail);
					address=detail;
					//获取经纬度并且赋值
					var lat = loc.latlng.lat;
					var lng = loc.latlng.lng;
					//经纬度拼接
					latlng = lat+","+lng;
					console.log("latlng","latlng是："+latlng);
				}
			}, false);
			
			//鼠标失焦事件
			$(function(){
				$("#userName").blur(function(){
					if ($("#userName").val().length==0) {
						 layer.tips('姓名不能为空', '#userName', {
                        tips: [1, '#FF0000'],
                        time: 1000
                    });
					}
                   
				});
				
			});
			//提交信息
			$("#btn1").click(function(){
				var userName = $("#userName").val();
				var introduction = $("#introduction").val();

                var permission = $("#permission option:selected").val();
                alert("userName:"+userName+":permission:"+permission);
				if(userName==""){
					return;
				}
				if (address==null) {
					layer.tips('地址不能为空', '#mapPage', {
                        tips: [1, '#FF0000'],
                        time: 5000
                    });
                    return;
				}
				alert(userName+";"+introduction+";"+address+";"+latlng+";"+path);
				$.ajax({
					type:"post",
					url:"/studentVerify/studentAddInfo",
					data:{
                        sImage:path,
                        sName:userName,
                        sIntroduction:introduction,
                        sAddress:address,
                        sLatlng:latlng,
                        sPermission:permission
						
					},
					success:function(data) {
						layer.alert(data);
					}
					
					
				});
				
			});

            $(function(){
               $.ajax({
                   type:"get",
                   url:"/studentVerify/getStudentValue",
                   success:function(data) {
                        $("#userAccount").val(data.tStudent.sAccount);
                   }
               });
            });

			
</script>

</body>
</html>